<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签署合同</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="./viewer.css">
</head>
<body>
<div id="container">
    <div id="paging">
        <span>1</span>
        <span>/</span>
        <span></span>
    </div>
    <div id="sideBar">
        <i style="color: #FFFFFF;" class="fa fa-search-plus fa-lg" aria-hidden="true" onclick="imagePlus(this)"></i>
    </div>
    <div id="mainContainer">
        <div style="background: url('./0.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./1.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./2.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./3.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./4.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./5.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./6.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./7.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./8.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
        <div style="background: url('./9.jpg') no-repeat;width: 100%;height: 100%;background-size: 100%"></div>
    </div>



    <div style=" width: 100%; z-index: 999;position: fixed;bottom: 0;left: 0;display: flex;text-align: center;background-color: rgba(66,66,66,1);height: 40px;line-height: 40px;color: #FFFFFF">
        <span style="flex: 1">签署</span>
        <span style="flex: 1" onClick="nextButton()">下一步</span>
    </div> <!-- button -->

</div>
<div id="cover">
    <div id="close" onclick="imageClose()">
        <i class="fa fa-times-circle fa-2x" aria-hidden="true"></i>
    </div>
    <div id="showImg"></div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="transform.js"></script>
<script src="alloy_finger.js"></script>
<script>
    //禁止移动端橡皮筋效果
    // document.body.addEventListener('touchstart',function (e) {
    //     startX = e.targetTouches[0].clientX;
    //     startY = e.targetTouches[0].clientY;
    // })
    // document.body.addEventListener('touchmove', function (e) {
    //     console.log(e.targetTouches[0].clientY-startY);
    //     if(e.targetTouches[0].clientY-startY < 0) {
    //         $('#container').offset({top:(e.targetTouches[0].clientY-startY)});
    //     }
    //     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    // }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

    $(document).ready(function () {
        $('#paging').children()[2].innerText = parseInt($(document).height() / $(window).height())
    });
    var initPage = 1;
    var p = 0, t = 0;
    $(window).scroll(function () {
        p = $(this).scrollTop();
        if (t <= p) {//下滚
            if ($(window).scrollTop() > $(window).height() * 2 / 3 + $(window).height() * (initPage - 1)) {
                initPage++;
                $('#paging').children()[0].innerText = initPage
            }
        } else {//上滚
            if ($(window).scrollTop() < $(window).height() * (initPage - 1) - $(window).scrollTop() * 2 / 3) {
                initPage--;
                $('#paging').children()[0].innerText = initPage
            }

        }
        setTimeout(function () {
            t = p;
        }, 0);


    });

    function imagePlus(e) {
        $('#showImg').css('transition','all .2s');

        // $('#container').css('overflow','hidden');
        // $('#cover').on('touchmove',function (e) {
        //     e.preventDefault();
        // },{passive: false});
        //阻止滚动条
        document.body.addEventListener('touchmove', function (e) {
            e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
        }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

        $('#cover').css('display', 'block');
        $('#close').css('display', 'block');
        $('#showImg').css('display', 'block');
    }
    function imageClose() {
        //恢复滚动条
        document.body.addEventListener('touchmove', function (e) {
            e.returnValue = true;
        }, false);
        $('#cover').css('display', 'none');
        $('#close').css('display', 'none');
    }

    var pinchImg = document.getElementById("showImg");
    Transform(pinchImg);
    var initScale = 1;
    new AlloyFinger(pinchImg, {
        multipointStart: function () {
            initScale = pinchImg.scaleX;
        },
        pinch: function (evt) {
            pinchImg.scaleX = pinchImg.scaleY = initScale * evt.zoom;
        },
        pressMove:function(evt){
            pinchImg.translateX += evt.deltaX;
            pinchImg.translateY += evt.deltaY;
            evt.preventDefault();
        }
    });
</script>
</body>
</html>